<?php echo $header; ?>
<div class="container">
  <ul class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <li><a href="<?php echo $breadcrumb['href']; ?>"> <?php echo $breadcrumb['text']; ?></a></li>
    <?php } ?>
  </ul>
  <?php if ($error_warning) { ?>
  <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?></div>
  <?php } ?>
  <div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <h1><?php echo $heading_title; ?></h1>
              <div id="review"></div>
              <form id="form-oreview" class="form-horizontal">
                <div id="oreview"></div>
                <h2><?php echo $text_write; ?></h2>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-oreview"><?php echo $entry_oreview; ?></label>
                    <textarea name="text" rows="5" id="input-oreview" class="form-control"></textarea>
                    <div class="help-block"><?php echo $text_note; ?></div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <button style="width:90px; height:90px;"  type="button" id="button-upload" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-default"><i class="fa fa-upload"></i> <?php echo $button_upload; ?></button>                   
                    <span><?php echo $text_upload_size; ?></span>
                  </div>
                </div>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label"><?php echo $entry_rating; ?></label>
                    &nbsp;&nbsp;&nbsp; <?php echo $entry_bad; ?>&nbsp;
                    <input type="radio" name="rating" value="1" />
                    &nbsp;
                    <input type="radio" name="rating" value="2" />
                    &nbsp;
                    <input type="radio" name="rating" value="3" />
                    &nbsp;
                    <input type="radio" name="rating" value="4" />
                    &nbsp;
                    <input type="radio" name="rating" value="5" />
                    &nbsp;<?php echo $entry_good; ?></div>
                </div>
                <?php echo $captcha; ?>
                <div class="buttons clearfix">
                  <div class="pull-right">
                    <button type="button" id="button-oreview" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"><?php echo $button_submit; ?></button>
                  </div>
                </div>
              </form>
      <?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
<script type="text/javascript"><!--
$('#button-oreview').on('click', function() {
  $.ajax({
    url: 'index.php?route=account/oreview/write&order_product_id=<?php echo $order_product_id; ?>',
    type: 'post',
    dataType: 'json',
    data: $("#form-oreview").serialize(),
    beforeSend: function() {
      $('#button-review').button('loading');
    },
    complete: function() {
      $('#button-review').button('reset');
    },
    success: function(json) {
      $('.alert-success, .alert-danger').remove();

      if (json['error']) {
        $('#review').after('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
      }

      if (json['success']) {
        $('#review').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

        $('textarea[name=\'text\']').val('');
        $('input[name=\'rating\']:checked').prop('checked', false);
      }
    }
  });
});
//--></script>
<script type="text/javascript"><!--
function verifyFileSize(file_el) {
  var filepath = file_el.val();
  var extStart = filepath.lastIndexOf(".");
  var ext = filepath.substring(extStart, filepath.length).toUpperCase();
  if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
    alert("<?php echo $text_image_type; ?>");
    return false;
  }
  var file_size = 0;

  file_size = file_el[0].files[0].size;
  var size = file_size / 1024;
  if (size > 1024) {
    alert("<?php echo $text_upload_size; ?>");
    return false;
  }

  return true;
}

$('#button-upload').on('click', function() {
  var node = this;

  $('#form-upload').remove();

  $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

  $('#form-upload input[name=\'file\']').trigger('click');

  if (typeof timer != 'undefined') {
      clearInterval(timer);
  }

  timer = setInterval(function() {
    if ($('#form-upload input[name=\'file\']').val() != '') {
      clearInterval(timer);

      if (!verifyFileSize($('#form-upload input[name=\'file\']'))) {
        return;
      }

      $.ajax({
        url: 'index.php?route=tool/upload_img',
        type: 'post',
        dataType: 'json',
        data: new FormData($('#form-upload')[0]),
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function() {
          $(node).button('loading');
        },
        complete: function() {
          $(node).button('reset');
        },
        success: function(json) {
          $(node).parent().parent().find('.text-danger').remove();

          if (json['error']) {
            $(node).parent().parent().prepend('<div class="text-danger">' + json['error'] + '</div>');
          }

          if (json['success']) {
            $(node).parent().children(".imgbox").remove();
            $(node).parent().append('<div style="float:left; margin-right:10px">'
                                        + '<div class="imgbox" style="width:90px; height:90px; border:1px solid;">'
                                          + '<img style="max-width:88px; max-height:88px" src="' + json['imgurl'] + '"></img>'
                                        + '</div>'
                                        + '<input type="hidden" name="code[]" value="' + json['code'] + '"/>'
                                      + '</div>');
          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }
  }, 500);
});
//--></script>
<?php echo $footer; ?>
